<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    width="35%"
    @ok="handleOk"
    @cancel="close"
  >
    <a-form :model="formState" ref="formRef">
      <a-form-item
        label="关闭理由"
        name="remark"
        :rules="[{ required: true, message: '请输入关闭理由' }]"
      >
        <a-textarea
          v-model:value="formState.remark"
          placeholder="请输入关闭理由"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { refundClose } from "@/api/refund";
import { message } from "ant-design-vue";
import { reactive, ref } from "vue";
import useModal from "@/utils/useModal";

const props = defineProps({
  id: {
    type: [String, Number],
    default: 0,
  },
});
const { visible, modalTitle } = useModal();
const emits = defineEmits(["update"]);
const formRef = ref();
const formState = reactive({
  remark: "",
});
const handleOk = async () => {
  await formRef.value.validate();
  refundClose({
    id: props.id,
    ...formState,
  }).then((res) => {
    if (res.code == 0) {
      message.success(res.msg);
      hide();
      emits("update");
    }
  });
};

const show = (model) => {
  visible.value = true;
  modalTitle.value = model.title;
};
const hide = () => {
  visible.value = false;
  formRef.value.resetFields();
};
const close = () => {
  formRef.value.resetFields();
};
// 暴露方法
defineExpose({
  show,
});
</script>
